<template>
    <div id="release-list">
        <van-tabs v-model:active="activeName" @click-tab="getData">
            <van-tab title="出售中" name="active"></van-tab>
            <van-tab title="售出待交易" name="ordering"></van-tab>
            <van-tab title="交易完成" name="end"></van-tab>
            <van-tab title="已下架" name="disable"></van-tab>
        </van-tabs>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh()">
            <van-list v-model:loading="loading" :finished="finished" :offset="100" finished-text="没有更多了" @load="loadData()" class="con-wrap">
                <van-card class="bg-f mt20" v-for="item,index in releaseList" :key="item.id" :desc="item.description" :title="item.title">
                    <template #thumb>
                        <img :src="item.thumb" class="good-item-img" alt="item.good.title">
                    </template>
                    <template #footer>
                        <van-button plain type="danger" size="small" v-if="item.status == 1 || item.status == 2" @click="toRemove(item.id,index)">删除</van-button>
                        <van-button plain type="warning" size="small" v-if="item.status == 1" @click="toOff(item.id)">下架</van-button>
                        <van-button plain type="success" size="small" v-if="item.status == 1 || item.status == 2" @click="toDetial(item.id)">修改</van-button>
                    </template>
                    <template #price>
                        <div class="release-price"><span class="color_9">价格</span> ￥{{ item.price }}</div>
                    </template>
                </van-card>
            </van-list>
        </van-pull-refresh>
        <a href="#/good/release" class="fixed-btn">
            <img src="/statics/home/images/add.png" class="flxed-img" alt="add">
            发布装备
        </a>
    </div>
</template>


<script>
import {showConfirmDialog} from 'vant'
export default {
    name: 'ReleaseList',
    data() {
        return {
            activeName: 'active',
            onLoad:false,
            loading:false,
            finished:false,
            refreshing: false,
            pages:{
                page:0,
                size:10,
            },
            status:1,
            releaseList: [],
        }
    },
    created() { },
    methods: {
        getData(type){
            switch (type.name) {
                case 'end':
                    this.status = 4;
                    break;
                case 'ordering':
                    this.status = 3;
                    break;
                case 'disable':
                    this.status = 2;
                    break;
                default:
                    this.status = 1;
                    break;
            }
            this.onRefresh();
        },
        loadData() {
            let self = this;
            if (self.refreshing) {
                self.refreshing = false;
            }
            self.loading = true;
            self.finished = false
            self.$api.good.list({page: self.pages.page,size: self.pages.size,status:this.status}).then(res => {
                let data = self.pages.page == 1 ? [] : self.releaseList;
                for( var i = 0; i< res.result.length; i ++) {
                    data.push(res.result[i]);
                }
                self.releaseList = data;
                self.pages.page++;
                self.loading = false;
                if (res.result.length < 10) {
                    self.finished = true;
                }
            }).finally(e =>{});
        },
        // 下拉刷新
        onRefresh() {
            // 清空列表数据
            this.finished = false;
            this.loading = true;
            this.refreshing = true;
            this.pages.page = 1;
            this.loadData();
        },
        toDetial(id){
            this.$router.push('/good/release/' + id);
        },
        toRemove(id,index){
            showConfirmDialog({
                title: '删除',
                message:'此操作不可恢复，请三思而后行！',
            })
            .then(() => {
                this.$api.good.remove({detail_id:id}).then(res=>{
                    this.releaseList.splice(index,1)
                }).finally(e=>{})
            })
            .catch(() => {
                // on cancel
            });
        },
        toOff(id){
            showConfirmDialog({
                title: '下架',
                message:'此操作不可恢复，请三思而后行！',
            })
            .then(() => {
                this.$api.good.updateoff({detail_id:id}).then(res=>{
                }).finally(e=>{})
            })
            .catch(() => {
                // on cancel
            });
        },
    }
}
</script>
